<template>
  <van-pull-refresh v-model="loadState.pullLoading" :disabled="pullDisabled" @refresh="onRefresh">
    <virtual-list
      ref="vsl"
      class="my_scrollbar h-full overflow-y-auto"
      :data-key="'conversationID'"
      :data-sources="conversationStore.storeConversationList"
      :data-component="ConversationListItemVue"
      :estimate-size="88"
      @tobottom="onBottom"
      @scroll="onScoll"
    />
  </van-pull-refresh>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue';
  import useConversationStore from '@/store/conversation';
  import VirtualList from '@/components/VirtualList';
  import ConversationListItemVue from './ConversationListItem.vue';

  const conversationStore = useConversationStore();
  const loadState = reactive({
    loading: false,
    pullLoading: false,
    hasMore: true,
  });
  const pullDisabled = ref(false);

  const onBottom = async () => {
    if (loadState.hasMore && !loadState.loading) {
      loadState.loading = true;
      loadState.hasMore = await conversationStore.getConversationListFromReq(true);
      loadState.loading = false;
    }
  };

  const onScoll = (e: any) => {
    pullDisabled.value = e.target.scrollTop > 0;
  };

  const onRefresh = async () => {
    await conversationStore.getConversationListFromReq();
    loadState.pullLoading = false;
  };
</script>

<style lang="scss" scoped>
  .van-pull-refresh {
    flex: 1;
  }
</style>
